웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹사이트 UI 인터페이스 중에서 부분 영역을 숨기는.. 즉, 히든기능을 통해 필요한 콘텐츠만 우선적으로 보여주는 어코디언 또는 탭 방식을 사용할 수 있다. 그 중에서 오늘은 어코디언 방식을 알아보고자 한다.
어코디언은 악기 이름에도 있다. 이를 아는 사용자라면 그 기능을 쉽게 유추할 수 있을 것이다. 어코디언 방식은 특정 메뉴를 클릭하면 해당 영역이 넓어지는 애니메이션이 일어나고 나머지 다른 창들은 크기가 줄어들게된다. 이를 활용하면 정해진 공간안에 다양한 콘텐츠를 보여주게 된다. 수납장이라고 생각하면 더 쉬울 것이다.
제이쿼리 ui를 사용한다면 간단하게 이를 구현할 수 있다. 제이쿼리 ui는 무료이면서 편리한 컴포넌트 요소들을 제공하고 있다.
이를 직접 구현하기 위해서는 아래와 같은 코드가 필요하다.
두개의 콘텐츠 박스를 만들고 해당 영역을 클릭하면 현재 요소는 늘어나고 다른 요소는 크기가 줄어들게 된다. 위는 html 코드이며 스크립트는 아래를 참고하자.
애니메이션을 구현하기 위해 animate 메소드를 사용해 구현하였다. animate 객체는 매우 간단하게 애니메이션 효과를 구현해주는 제이쿼리 메소드이다.
간략하게 설명하자면 해당하는 영역을 클릭할 경우 선택된 요소의 높이는 100px 다른 div 요소 크기는 0으로 만들어준다.
어코디언은 악기 이름에도 있다. 이를 아는 사용자라면 그 기능을 쉽게 유추할 수 있을 것이다. 어코디언 방식은 특정 메뉴를 클릭하면 해당 영역이 넓어지는 애니메이션이 일어나고 나머지 다른 창들은 크기가 줄어들게된다. 이를 활용하면 정해진 공간안에 다양한 콘텐츠를 보여주게 된다. 수납장이라고 생각하면 더 쉬울 것이다.
# 어코디언 UI 인터페이스구현
제이쿼리 ui를 사용한다면 간단하게 이를 구현할 수 있다. 제이쿼리 ui는 무료이면서 편리한 컴포넌트 요소들을 제공하고 있다.
이를 직접 구현하기 위해서는 아래와 같은 코드가 필요하다.
<style>
.accodiv {
height: 15px;
overflow: hidden;
}
</style>
<div class="wrap">
<div class="accodiv">
<p>test</p>
<span>This is first DIV element.</span>
</div>
<div class="accodiv">
<p>test2</p>
<span>This is second DIV element.</span>
</div>
</div>
.accodiv {
height: 15px;
overflow: hidden;
}
</style>
<div class="wrap">
<div class="accodiv">
<p>test</p>
<span>This is first DIV element.</span>
</div>
<div class="accodiv">
<p>test2</p>
<span>This is second DIV element.</span>
</div>
</div>
두개의 콘텐츠 박스를 만들고 해당 영역을 클릭하면 현재 요소는 늘어나고 다른 요소는 크기가 줄어들게 된다. 위는 html 코드이며 스크립트는 아래를 참고하자.
<script>
$("accodiv").click(function() {
$(this).animate({height: "100"}, 500);
$(this).siblings().animate({height: "15"}, 500);
}
</script>
$("accodiv").click(function() {
$(this).animate({height: "100"}, 500);
$(this).siblings().animate({height: "15"}, 500);
}
</script>
애니메이션을 구현하기 위해 animate 메소드를 사용해 구현하였다. animate 객체는 매우 간단하게 애니메이션 효과를 구현해주는 제이쿼리 메소드이다.
간략하게 설명하자면 해당하는 영역을 클릭할 경우 선택된 요소의 높이는 100px 다른 div 요소 크기는 0으로 만들어준다.
아래의 글도 찾고 계시지 않나요?
